<template>
	<uni-popup ref="skuShow" type="bottom" :is-mask-click="true" background-color="#fff" border-radius="10px 10px 0 0"
		style="z-index: 999;">
		<view class="show-panel">
			<view class="close-icon">
				<uni-icons type="closeempty" size="24" color="#c2c2c2" @click="handleClose()"></uni-icons>
			</view>
			<view class="product-view">
				<view class="product">
					<image :src="$imageUrl(product.logo)" border-radius="8"></image>
					<view class="info">
						<goods-price :value="sale_price" color="#fa3534"></goods-price>
						<view class="select-desc">
							已选
							<text>{{spec_value}}</text>
						</view>
					</view>
				</view>

				<view class="rule-cell">
					<view class="label">规格</view>
					<view class="select-list">
						<text :key="index" v-for="(guige ,index) in product.goods_spec" @click="selectType(index,guige)"
							:class="{active:current == index}">
							{{guige.title}}</text>
					</view>
				</view>

				<view class="count">
					<text class="label">数量</text>
					<uni-number-box :value="selectNum" :min="min" :max="max" :width="60" @change="numChange" />
				</view>

				<view class="payWay" v-if="use_pay_way==1">
					<text class="label">支付方式</text>
					<u-radio-group v-model="payWay" @change="changePayWay">
						<u-radio v-for="(item, index) in payWayList" :key="index" :label="item.name" :name="item.value"
							:disabled="item.disabled"></u-radio>
					</u-radio-group>
				</view>

				<view class="ticket-tips" v-if="use_pay_way==1 && payWay==1">
					当前品牌可用水票：{{total_ticket_num}}张
				</view>

				<view class="ticket-tips" v-if="payWay==2">
					总额度：{{month_settle.settle_limit}}，当前可用额度：{{month_settle.settle_limit - month_settle.use_limit}}
				</view>

				<view class="bottom-bar">
					<view class="menu-group" v-if="payWay==1">
						<view v-if="use_ticket">
							<view class="discount-price" v-if="total_ticket_num==0">
								没有水票，请先购买水票</view>
							<view class="discount-price" v-else-if="total_num<=total_ticket_num">
								使用水票:<text>{{use_ticket_num}}张抵扣</text></view>
							<view class="discount-price" v-else>
								使用水票:<text>{{use_ticket_num}}张抵扣</text>,还需支付:<text>￥{{pay_amount}}</text></view>
						</view>
						<view class="total-price" v-else>总价:<text>￥{{totalPrice}}</text></view>
					</view>
					<view class="menu-group" v-if="payWay==2">
						<view v-if="discount>0">
							<view class="discount-price">优惠:<text>￥{{discount}}</text></view>
							<view class="total-price">优惠后金额:<text>￥{{pay_amount}}</text></view>
						</view>
						<view v-else>
							<view class="total-price">总价:<text>￥{{totalPrice}}</text></view>
						</view>
					</view>
					<view class="menu-group" v-if="payWay==3">
						<view v-if="discount>0">
							<view class="discount-price">使用信用额度:<text>￥{{use_credit_limit}}</text></view>
							<view class="total-price">还需支付:<text>￥{{pay_amount}}</text></view>
						</view>
						<view v-else>
							<view class="total-price">使用信用额度:<text>￥{{totalPrice}}</text></view>
						</view>
					</view>

					<view class="btn-group">
						<view class="btn" @click="submit()">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineProps,
		toRefs,
		computed,
	} from 'vue';

	defineOptions({
		name: 'water-sku'
	});

	const skuShow = ref(null);

	const props = defineProps({
		goods: {
			type: Object,
			default: null
		},
		skuId: {
			type: [Number, String],
			default: 'none'
		}
	})

	/* watch(() => props.goods, (newVal, oldVal) => {
		console.log('监听数据goods');
		console.log('new', newVal);
		console.log('old', oldVal);
	}) */

	const product = computed(() => {
		initData(props.goods);
		return props.goods;
	})

	const state = reactive({
		current: 0,
		selectItem: false,
		sale_price: 0,
		spec_value: '默认',
		selectNum: 1,
		min: 1,
		max: 99,
		use_pay_way: 1,
		payWayList: [],
		payWay: 0,

		total_ticket_num: 0,
		use_ticket: 0,
		use_ticket_num: 0,
		discount: 0,
		use_credit_limit: 0,
		pay_amount: 0,
		totalPrice: 0,
		month_settle: {
			settle_status: 0,
			settle_limit: 0,
			use_limit: 0,
		},
	})

	function initData(goods) {
		console.log('初始化', goods);
		goods.goods_spec.forEach((item, index) => {
			if (item.id == props.skuId) {
				selectType(index, item);
			}
		});
		getPayWayList();
	}

	function handleOpen() {
		skuShow.value.open();
	}

	function handleClose() {
		skuShow.value.close();
	}

	defineExpose({
		open: handleOpen,
		close: handleClose
	});

	function getPayWayList() {
		state.payWayList = [{
			value: 1,
			name: '水票',
			disabled: false,
		}, {
			value: 2,
			name: '在线支付',
			disabled: false,
		}, {
			value: 3,
			name: '月结',
			disabled: false,
		}];
	}

	function selectType(index, data) {
		console.log('切换规格', data);
		state.current = index;
		state.selectItem = data;
		state.sale_price = data.price;
		state.spec_value = data.title;
		state.selectNum = 1;
		calculationPrice();
	}

	function numChange(e) {
		console.log('购买数量', e);
		state.selectNum = e;
		calculationPrice();
	}

	function changePayWay(evt) {
		console.log('支付方式', evt);
		// state.payWay = parseInt(evt.detail.value);
	}

	function buyNow() {
		calculationPrice();
	}

	function calculationPrice() {
		console.log('计算价格', state.sale_price, state.selectNum);
		state.totalPrice = parseFloat(state.sale_price) * parseInt(state.selectNum);
	}

	const {
		current,
		selectItem,
		sale_price,
		spec_value,
		selectNum,
		min,
		max,
		use_pay_way,
		payWayList,
		payWay,
		total_ticket_num,
		use_ticket,
		use_ticket_num,
		discount,
		use_credit_limit,
		pay_amount,
		totalPrice,
		month_settle
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	//弹出面板
	.show-panel {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		padding: $m20;

		.close-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.product-view {
			flex: 1;

			.product {
				display: flex;
				align-items: flex-end;

				image {
					width: 200rpx;
					height: 200rpx;
				}

				.info {
					flex: 1;
					margin-left: $m20;

					.select-desc {
						margin-top: $m12;
						font-size: $font-24;
						color: $u-tips-color;

						text {
							margin-left: $m8;
							color: $u-content-color;
						}
					}
				}
			}

			.rule-cell {
				margin-top: $m24;

				.label {
					color: $u-main-color;
				}

				.select-list {
					display: flex;
					flex-wrap: wrap;
					margin-top: $m16;

					text {
						margin: 0 $m16 $m16 0;
						padding: 0.3em 1em;
						font-size: $font-24;
						color: $u-content-color;
						border-radius: $radius-100;
						border: 1px solid $u-border-color;

						&.active {
							background-color: #d3dff7;
							border-color: #d3dff7;
							color: #125cd7;
						}
					}
				}
			}

			.count {
				@include f-between;
				margin-top: $m20;

				.label {
					color: $u-main-color;
				}
			}

			.payWay {
				@include f-between;
				margin-top: $m20;

				.label {
					color: $u-main-color;
				}
			}

			.ticket-tips {
				margin: $m20 0;
				padding: $m12 $m24;
				background: #fee9e8;
				border-radius: 40rpx;
				color: #eb4632;
			}

			//底部固定
			.bottom-bar {
				position: fixed;
				left: 0rpx;
				bottom: 0;
				padding-bottom: calc(var(--window-bottom) + 10px);
				right: 0rpx;
				z-index: 9;
				overflow: hidden;
				@include f-between;
				height: 98rpx;
				padding: 0 $m24;
				background-color: $u-bg-reverse-color;

				.menu-group {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: $font-36;

					.discount-price {
						margin: 0 20rpx 0 0;

						text {
							color: #fa3534;
							font-weight: 700;
						}
					}

					.total-price {
						text {
							color: #fa3534;
							font-weight: 700;
						}
					}
				}

				.btn-group {
					flex: 1;

					.btn {
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 40rpx;
						background: linear-gradient(to right, #125cd7, #279dfa);
						color: #fff;
						text-align: center;
					}
				}
			}
		}
	}
</style>